<template>
  <default-layout>
    <header-back text="综合查询" slot="header"></header-back>
    <!--<div class="condition" slot="header">
      <div class="select" @click="popupShow" ref="select">
        <span>是否欠费</span>&nbsp;
        <i class="xffont xf-up"></i>
      </div>
      <div class="search" @click="$router.push('/corp-query/search')">
        <i class="xffont xf-search"></i>
        <span class="text">搜索</span>
      </div>
    </div>-->
    <mt-popup
      v-model="popupVisible"
      class="popup"
      :style="`left: ${popupLeft}px;top: ${popupTop}px;`"
      popup-transition="popup-fade">
      <span class="select-item" :class="{current: select === 0}" @click="handleSelect(0)">全部状态</span>
      <span class="select-item" :class="{current: select === 1}" @click="handleSelect(1)">欠费</span>
      <span class="select-item" :class="{current: select === 2}" @click="handleSelect(2)">未欠费</span>
    </mt-popup>
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="disabledScroll"
      infinite-scroll-distance="10"
      infinite-scroll-immediate-check="false"
      class="list scroll-view"
      slot="main">
      <div @click="detail(val)" class="item" v-for="(val, key) in list" :key="key">
        <div class="top">
          <div class="left">
            <span class="tit">{{val.name}}</span>
            <span>{{val.sex}}</span>
          </div>
          <div class="right danger">{{val.isOwe}}</div>
        </div>
        <div class="bottom">
          <div>{{val.archiveCode}}</div>
          <div>{{val.mydate}}</div>
        </div>
      </div>
      <loading-text v-if="loading"></loading-text>
      <finish-text v-if="noMore"></finish-text>
      <empty v-if="empty"></empty>
      <yd-backtop></yd-backtop>
    </div>
    <transition name="router" mode="out-in">
      <router-view class="fixed-router" @search="search"></router-view>
    </transition>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import {infinite} from '../../../common/js/mixin'
  import {mapGetters, mapMutations} from 'vuex'
  import LoadingText from '../../../components/loading-text/loading-text'
  import FinishText from '../../../components/finish-text/finish-text'
  import Empty from '../../../components/empty/empty'

  export default {
    components: {Empty, FinishText, LoadingText, DefaultLayout, HeaderBack},
    data() {
      return {
        select: 0,
        popupVisible: false,
        popupTop: 20,
        popupLeft: 20,
        /* 以下五个参数为上拉加载页面必需的参数 */
        loading: true,
        page: 1,
        size: 10,
        total: 0,
        list: []
        /* 以上五个参数为上拉加载页面必需的参数 */
      }
    },
    computed: {
      ...infinite,
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      ...mapMutations({
        setCorpQuery: 'SET_CORP_QUERY'
      }),
      popupShow() {
        const r = this.$refs.select.getBoundingClientRect()
        const w = r.width
        const h = r.height
        const t = r.top
        const l = r.left
        this.popupTop = t + h
        this.popupLeft = w / 4 + l
        this.popupVisible = true
      },
      handleSelect(num) {
        this.select = num
        this.popupVisible = false
      },
      search(text) {
      },
      loadMore() {
        if (this.page === 1) this.list = []
        this.$post('/sapi/public/system/corp/person/get', {
          corpId: this.userInfo.aab001,
          page: this.page,
          rows: this.size
        }, loading => { this.loading = loading }).then(res => {
          this.list = this.list.concat(res.data.dataList)
          this.total = res.data.pageBean.totalCount
          this.page++
        })
      },
      detail(val) {
        this.setCorpQuery(val)
        this.$router.push({
          name: 'corpQueryDetail'
        })
      }
    },
    created() {
      this.loadMore()
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../common/style/variable";

  .condition {
    background: #fff;
    padding: .2rem .3rem;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .select {
      display: flex;
      align-items: center;
    }
    .search {
      .text {
        color: #666;
        font-size: .3rem;
      }
    }
  }

  .select-item {
    display: inline-block;
    font-size: .3rem;
    padding: .2rem .2rem;
    border-radius: 6px;
    &.current {
      background: $primary;
      color: #fff;
    }
  }

  .popup {
    border-radius: 8px;
    padding: .2rem;
    transform: translateY(50%);
    &:after {
      content: '';
      height: .3rem;
      width: .3rem;
      background: #fff;
      position: absolute;
      bottom: 100%;
      left: .3rem;
      transform-origin: 100% 100%;
      transform: rotate(-45deg);
    }
  }

  .list {
    padding: .15rem 0 0 0;
    .item {
      background: #fff;
      padding: .3rem .2rem;
      border-bottom: 1px solid #ededed;
      display: block;
      @include active;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
        }
        .tit {
          font-size: .33rem;
          display: inline-block;
          padding: 0 .3rem 0 0;
        }
      }
      .bottom {
        padding: .2rem 0 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .danger {
    color: $danger;
  }

  .primary {
    color: $primary;
  }
</style>
